<template>
    <div class="login-box">
        <v-toolbar color="blue-grey lighten-5" class="title-box">
            <v-icon class="material-icons" @click="$router.back(-1)">arrow_back</v-icon>
            <v-toolbar-title class="white--text title-text">{{$t('m.Login')}}</v-toolbar-title>
        </v-toolbar>
        <div class="content-box">
            <v-form v-model="valid">
                <v-text-field
                    label="E-mail"
                    v-model="email"
                    :rules="emailRules"
                    required
                ></v-text-field>
                <v-text-field
                    label="Password"
                    v-model="name"
                    :rules="nameRules"
                    required
                ></v-text-field>
            </v-form>
            <v-btn block large depressed color="orange accent-3 login-btn">Login</v-btn>
            <div class="forgot-password" @click="dialog=true">Forgot Password</div>
        </div>
        <v-dialog v-model="dialog" max-width="500px">
            <v-card>
                <!--<v-card-title>-->
                    <!--Email*-->
                <!--</v-card-title>-->
                <v-card-text>
                    <v-text-field
                        label="Email"
                        v-model="email2"
                        :rules="emailRules2"
                        required
                    ></v-text-field>
                    <v-btn block large depressed color="orange accent-3 login-btn" @click="forgotEmailPassword()">Next></v-btn>
                </v-card-text>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: 'loginEmail',
        data() {
            return {
                valid: false,
                name: '',
                nameRules: [
                    v => !!v || 'Password is required',
                ],
                email: '',
                email2: '',
                emailRules: [
                    v => !!v || 'E-mail is required',
                    v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
                ],
                emailRules2: [
                    v => !!v || 'E-mail is required',
                    v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
                ],
                dialog: false,
            }
        },
        methods: {
            forgotEmailPassword() {
                this.$router.push('resetresult')
            }
        }
    };
</script>
<style>
    .content-box{
        padding:0 15px;
    }
    .login-box .title-box{
        background: #f2f2f2;
    }
    .login-box .title-box.toolbar{
        box-shadow: none;
        color:#444;
    }
    .login-box .title-box .title-text{
        color:#444!important;
        margin:0 auto!important;
        padding-right:46px;
    }
    .login-btn{
        text-transform:none !important;
        color:#fff!important;
        border-radius:5px!important;
    }
    .forgot-password{
        color:#119ED9;
        text-decoration:underline
    }

</style>
